<template>
    <div class="list">
        <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="item-name nav-category" @mouseenter="enter(item)" @mouseleave="out" @click="selectCate">
                <span>{{ item.name }}</span>
            </div>
        </div>
        <div class="sub-category" v-if="vdate.childShow" @mouseenter="childenter()" @mouseleave="out">
            <div class="children-item">
                <div v-for="(child, index) in vdate.showItem" :key="index">
                    <div class="item-name" @click="selectCate">
                        <span>{{ child.name }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script lang="ts" setup>
import { reactive } from 'vue'


const list = [
    {
        id: 1,
        name: "家电",
        children: [
            {
                id: 11,
                name: "家电1"
            },
            {
                id: 12,
                name: "家电2"
            },
            {
                id: 13,
                name: "家电1"
            },
            {
                id: 14,
                name: "家电2"
            }
        ]
    },
    {
        id: 2,
        name: "家用",
        children: [{
            id: 21,
            name: "家用1"
        },
        {
            id: 22,
            name: "家用2"
        },
        {
            id: 23,
            name: "家用1"
        },
        {
            id: 24,
            name: "家用2"
        },
        {
            id: 25,
            name: "家用2"
        }
        ]
    },
    {
        name: "日用",
        children: [{
            name: "智选假日"
        }, {
            name: "全季"
        }]
    },
    {
        name: "服装",
        children: [{
            name: "智选假日"
        }, {
            name: "全季"
        }]
    },
    {
        name: "食品",
        children: [{
            name: "智选假日"
        }, {
            name: "全季"
        }]
    },
    {
        name: "其他",
        children: [{
            name: "智选假日"
        }, {
            name: "全季"
        }]
    }

]
const vdate = reactive({
    selePid: '',
    showItem: {},
    childShow: false

})

const enter = (item) => {

    vdate.showItem = item.children
    vdate.childShow = true
    console.log(111111111, vdate)
}
const out = () => {
    console.log(22222)
    vdate.childShow = false
}
const childenter = () => {
    vdate.childShow = true
}
</script>
<style scoped>
.list {
    position: relative;
    height: 100%;
    background-color: #fff;

    .list-item {
        height: 50px;
        line-height: 50px;
        width: 50%;

        :hover {
            box-shadow: 0 0 5px 1px #95b4e2;
        }

        .item-name {
            padding-left: 20px;
            cursor: pointer;


        }
    }
}

.nav-category {}

.sub-category {
    position: absolute;
    height: 400px;
    width: 50%;
    left: 50%;
    top: 0;
    box-shadow: 0 0 5px 1px #999;

    .children-item {
        height: 50px;
        line-height: 50px;

        :hover {
            box-shadow: 0 0 5px 1px #95b4e2;
        }

        .item-name {
            padding-left: 20px;
            cursor: pointer;


        }
    }
}
</style>